<template>
	<view :class="['container',{'dark':theme=='dark'}]">
		<view :class="['wrap',{'dark':theme=='dark'}]">
			
			<view class="mplrto">
				<view class="mplrto">
					<view class="bgtxt">{{$t('bico.W730')}}</view>
					<view class="bgtxttt">{{totalPrice}} USDT</view>
				</view>
				<view class="mplrto">
					<view class="bgtxt22">{{$t('bico.W731')}} ≈ {{TSLPrice}} TRX</view>
				</view>
			</view>
			<view>
				<!-- TABS 导航切换 -->
				<view class="bmret">
					<u-tabs :list="list" bg-color="" bar-height="4" bar-width="120" active-color="#1e61ff"
					 inactive-color="#b1b7bd" :is-scroll="false" :current="current" @change="change">
					</u-tabs>
				</view>
			</view>
			
			<!-- 矿机商城 -->
			<view v-show="current==0">
				<view class="kjsc" v-for="(item,index) in miningPage.records" :key='index'>
					<u-row gutter="16">
						<u-col span="10">
							<u-gap height="20" bg-color=""></u-gap>
							<view class="kjsc1 demo-layout">
								<image class="image3" :src="item.image2" mode=""></image>
								<text class="textclass">{{item.title}}</text>
							</view>
						</u-col>
						<u-col span="2">
							<view class="kjsc3 demo-layout">
								<image class="image4" src="../../static/gth.png" mode=""></image>
							</view>
						</u-col>
					</u-row>
					<u-line color="#868ca940"></u-line>
					
					<u-row gutter="16">
						<u-col span="4">
							<view class="kjsc1 kjlogo demo-layout">
								<text class="textclass2">+{{item.estimatedCapacity}} %</text>
							</view>
							<text class="dpm">
								{{$t('bico.W732')}}
							</text>
						</u-col>
						<u-col span="4">
							<view class="kjsc1 kjlogo demo-layout">
								<text class="textclass2">+{{item.estimatedStaticYield}} %</text>
							</view>
							
							<text class="dpm">
								{{$t('bico.W733')}}
							</text>
						</u-col>
						<u-col span="4">
							<view class="kjsc3 kjlogo demo-layout">
								<text class="textclass3"> {{item.cycleNumber}} <text class="textclass4"> {{cycleTypeMap[item.cycleType]}}</text> </text>
							</view>
							<text class="dpm kjsc3">
								{{$t('bico.W734')}}
							</text>
						</u-col>
					</u-row>
					<u-gap height="50" bg-color=""></u-gap>
					<u-line color="#868ca940"></u-line>
					
					<u-row gutter="16">
						<u-col span="6">
							<u-gap height="20" bg-color=""></u-gap>
							<view class="kjbg">
								<view class="kjsc1bg">
									<image class="image5" :src="item.image" mode=""></image>
								</view>
							</view>
							<u-gap height="20" bg-color=""></u-gap>
						</u-col>
						
						<u-col span="6">
							<u-gap height="30" bg-color=""></u-gap>
							<text class="dpmm1">
								{{$t('bico.W735')}}{{item.tradedAmount}}/{{item.totalSupply}}
							</text>
							
							<u-gap height="20" bg-color=""></u-gap>
							<text class="dpmm1">
								{{$t('bico.W736')}}{{item.energyLossNumber}} / {{item.fuelEnergyCoin}}
							</text>
							
							<u-gap height="20" bg-color=""></u-gap>
							<text class="dpmm1">
								
								{{$t('bico.W737')}}{{item.fuelEnergyNumber}} / {{item.fuelEnergyCoin}}
							</text>
							
							<u-gap height="20" bg-color=""></u-gap>
							<text class="dpmm1">
								{{$t('bico.W738')}}{{item.calculatingPowerNumber}} / {{item.calculatingPowerCoin}}
							</text>
							
							<u-gap height="20" bg-color=""></u-gap>
							<text class="dpmm1">
								{{$t('bico.W739')}}{{item.price}} {{item.priceCoin}}
							</text>
							
							<u-gap height="20" bg-color=""></u-gap>
							<text class="dpmm1">
								{{$t('bico.W740')}}{{item.name}}
							</text>

						</u-col>
					</u-row>
					<u-line color="#868ca940"></u-line>

					<!-- 购买按钮开始 -->
					<u-row gutter="16">
						<u-col span="12">
							<view class="demo-layout2"><!-- 缕空 -->
							</view>
						</u-col>
					</u-row>
					<u-row gutter="16">
						<u-col span="12">
							<view class="demo-layout">
								<view class="anniu">
									<u-button type="primary" @click="addMining(item.id)">{{$t('bico.W741')}}</u-button>
								</view>
							</view>
						</u-col>
					</u-row>
					<u-row gutter="16">
						<u-col span="12">
							<view class="demo-layout2"><!-- 缕空 -->
							</view>
						</u-col>
					</u-row>
					<!-- 购买按钮开始 -->
					
				</view>
			</view>
			
			<!-- 我的矿机 -->
			<view v-show="current==1">
				<view class="wdkj" v-for="(item,index) in miningOrderPage.records" :key='index'>
					<u-row gutter="16">
						<u-col span="6">
							<u-gap height="20" bg-color=""></u-gap>
							<view class="kjsc1 demo-layout">
								<image class="image3" :src="item.image2" mode=""></image>
								<text class="textclass">{{item.name}}</text>
							</view>
						</u-col>
						<u-col span="6">
							<u-gap height="20" bg-color=""></u-gap>
							<view class="cpou demo-layout">
								<text class="textclass2">{{item.price}} {{item.priceCoin}}</text>
							</view>
						</u-col>
					</u-row>
					
					<u-line color="#868ca940"></u-line>

					<view class="">
						<u-row gutter="20">
							<u-col span="4">
								<u-gap height="20" bg-color=""></u-gap>
								<view class="kjsc111 demo-layout">
									<text class="textclassc5">{{$t('bico.W742')}}</text>
								</view>
								<u-gap height="20" bg-color=""></u-gap>
								<view class="wdkj12 demo-layout">
									<text class="textclassc5 wdkj30 dashu12">{{item.received}}</text>
									<text class="textclassc5 wdkj30 btti suanli">&ensp;&ensp;&ensp;&ensp;{{item.miningCoin}}</text>
								</view>
							</u-col>
							<u-col span="4">
								<u-gap height="20" bg-color=""></u-gap>
							</u-col>
							<u-col span="4">
								<u-gap height="20" bg-color=""></u-gap>
								<view class="cpou kjsc111 demo-layout">
									<text class="textclassc5">{{$t('bico.W743')}}</text>
								</view>
								<u-gap height="20" bg-color=""></u-gap>
								<view class="cpou wdkj12 demo-layout">
									<text class="textclass9 btti suanli textclass2">+{{item.estimatedCapacity}}%</text>
								</view>
							</u-col>
						</u-row>
					</view>
					
					<view class="">
						<u-row gutter="20">
							<u-col span="4">
								<u-gap height="20" bg-color=""></u-gap>
								<view class="kjsc111 demo-layout">
									<text class="textclassc5">{{$t('bico.W744')}}</text>
								</view>
								<u-gap height="20" bg-color=""></u-gap>
								<view class="wdkj12 demo-layout">
									<text class="textclassc5 wdkj30 dashu12">{{item.available}}</text>
									<text class="textclassc5 wdkj30 btti suanli">{{item.staticCoin}}</text>
								</view>
							</u-col>
							<u-col span="4">
								<u-gap height="20" bg-color=""></u-gap>
							</u-col>
							<u-col span="4">
								<u-gap height="20" bg-color=""></u-gap>
								<view class="cpou kjsc111 demo-layout">
									<text class="textclassc5">{{$t('bico.W745')}}</text>
								</view>
								<u-gap height="20" bg-color=""></u-gap>
								<view class="cpou wdkj12 demo-layout">
									<text class="textclass9 btti suanli textclass2">+{{item.estimatedStaticYield}}%</text>
								</view>
							</u-col>
						</u-row>
					</view>
					
					<u-line color="#868ca940"></u-line>
					<view class="">
						<u-row gutter="16">
							<u-col span="4">
								<u-gap height="20" bg-color=""></u-gap>
								<view class="kjsc111 demo-layout">
									<text class="textclassc5">{{$t('bico.W746')}}</text>
								</view>
								<u-gap height="20" bg-color=""></u-gap>
								<view class="wdkj12 demo-layout">
									<text class="textclassc5 wdkj30 dashu1">{{item.cycleNumber}}</text>
									<text class="textclassc5 wdkj30 btti suanli"> {{cycleTypeMap[item.cycleType]}}</text>
								</view>
							</u-col>
							<u-col span="4">
								<u-gap height="20" bg-color=""></u-gap>
								<view class="kjsc1112 demo-layout">
									<text class="textclassc5">{{$t('bico.W747')}}</text>
								</view>
								<u-gap height="20" bg-color=""></u-gap>
								<view class="wdkj1222 demo-layout">
									
									<text class="textclassc5 wdkj30 dashu2">{{item.fuelEnergyNumber}}</text>
									<text class="textclassc5 wdkj30 btti suanli">{{item.fuelEnergyCoin}}</text>
								</view>
							</u-col>
							<u-col span="4">
								<u-gap height="20" bg-color=""></u-gap>
								<view class="cpou demo-layout">
									<text class="textclassc5">{{$t('bico.W748')}}</text>
								</view>
								<u-gap height="20" bg-color=""></u-gap>
								<view class="wdkj12 cpou demo-layout">
									
									<text class="textclassc5 wdkj30 dashu3">{{item.energyLossNumber}}</text>
									<text class="textclassc5 wdkj30 btti suanli"> {{item.energyLossCoin}}</text>
								</view>
							</u-col>
						</u-row>
					</view>

					
					<u-line color="#868ca940"></u-line>
					<view class="">
						<!-- 购买燃料按钮开始 -->
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout3"><!-- 缕空 -->
								</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout">
									<view class="anniu">
										<u-button type="primary" @click="linkKline(item.fuelEnergyCoin)">{{$t('bico.W749')}}</u-button>
									</view>
								</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout3"><!-- 缕空 -->
								</view>
							</u-col>
						</u-row>
						<!-- 购买燃料按钮结束 -->
					</view>
					
					<view class="" v-if="item.miningStatus==0" @click="startUp(item)">
						<!-- 启动按钮开始 -->
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout3"><!-- 缕空 -->
								</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout">
									<view class="anniu">
										<u-button type="error" @click="startUp(item)">{{$t('bico.W750')}}</u-button>
									</view>
								</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout3"><!-- 缕空 -->
								</view>
							</u-col>
						</u-row>
						<!-- 购买按钮结束 -->
					</view>
					
					<view class="" v-if="item.miningStatus!=0">
						<!-- 启动按钮开始 -->
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout3"><!-- 缕空 -->
								</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout">
									<view class="anniu">
										<u-button type="success">{{$t('bico.W751')}}</u-button>
									</view>
								</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout3"><!-- 缕空 -->
								</view>
							</u-col>
						</u-row>
						<!-- 购买按钮结束 -->
					</view>
				</view>
			</view>
			
			<!-- 我的收益 -->
			<view v-show="current==2">
				<view class="wdkj" v-for="(item,index) in miningOrderDetailPage.records" :key='index'>
					<u-row gutter="16">
						<u-col span="6">
							<u-gap height="20" bg-color=""></u-gap>
							<view class="kjsc1 demo-layout">
								<image class="image3" :src="item.image" mode=""></image>
								<text class="textclass">{{item.name}}</text>
							</view>
						</u-col>
						<u-col span="6">
							<view class="cpou demo-layout">
								<text class="textclassc5 wdkj30 dashu1 textclass2">{{item.price}}</text>
								<text class="textclassc5 wdkj30 btti suanli3">{{item.priceCoin}}</text>
							</view>
						</u-col>
					</u-row>
					<u-line color="#868ca940"></u-line>
					<view class="">
						<u-row gutter="16">
							<u-col span="6">
								<u-gap height="20" bg-color=""></u-gap>
								<view class="kjsc111 demo-layout">
									<view class="chanchu demo-layout">
										<text class="kjsc3539">{{$t('bico.W752')}}</text>
									</view>
								</view>
								<view class="wdkj12 demo-layout">
									<text class="textclassc5 wdkj30">{{$t('bico.W753')}}</text>
								</view>
							</u-col>
							
							<u-col span="6">
								<u-gap height="20" bg-color=""></u-gap>
								<view class="cpou demo-layout">
									<view class="chanchu demo-layout">
										
										<text class="textclassc5 wdkj30 btti">{{item.miningCOin}}</text>
									</view>
								</view>
								<view class="wdkj12 cpou demo-layout">
									<text class="textclassc5 wdkj30 kjsc3539">{{item.received}} {{item.miningCoin}}</text>
								</view>
							</u-col>
						</u-row>
					</view>
					
					<view class="">
						<u-row gutter="16">
							<u-col span="6">
								<u-gap height="20" bg-color=""></u-gap>
								
								<view class="wdkj12 demo-layout">
									<text class="textclassc5 wdkj30">{{$t('bico.W754')}}</text>
								</view>
							</u-col>
							
							<u-col span="6">
								<u-gap height="20" bg-color=""></u-gap>
								
								<view class="wdkj12 cpou demo-layout">
									<text class="textclassc5 wdkj30 kjsc3539">{{item.available}} {{item.staticCoin}}</text>
								</view>
							</u-col>
						</u-row>
					</view>
					
					<view class="">
						<u-row gutter="16">
							<u-col span="6">
								<u-gap height="20" bg-color=""></u-gap>
								
								<view class="wdkj12 demo-layout">
									<text class="textclassc5 wdkj30">{{$t('bico.W755')}}</text>
								</view>
							</u-col>
							
							<u-col span="6">
								<u-gap height="20" bg-color=""></u-gap>
								
								<view class="wdkj12 cpou demo-layout" v-if="item.miningOrderDetail.length==0">
									<text class="textclassc5 wdkj30 kjsc3539">0{{item.miningCoin}} 0{{item.staticCoin}}</text>
								</view>
								<view class="wdkj12 cpou demo-layout" v-else>
									<text class="textclassc5 wdkj30 kjsc3539">
										<!-- 循环收益显示 -->
										<span v-for="(orderDetail,index2) in item.miningOrderDetail" :key="index2">
										{{orderDetail.output}} {{orderDetail.miningUnit}} </span>
									</text>
								</view>
							</u-col>
						</u-row>
					</view>
					
					
					<view class="">
						<u-row gutter="16">
							<u-col span="4">
								<u-gap height="20" bg-color=""></u-gap>
								<view class="kjsc111 demo-layout">
									<text class="textclassc5">{{$t('bico.W756')}}</text>
								</view>
								<u-gap height="20" bg-color=""></u-gap>
								<view class="wdkj12 demo-layout">
									<text class="textclassc5 wdkj30 dashu1">{{item.cycleNumber}}</text>
									<text class="textclassc5 wdkj30 btti suanli">{{cycleTypeMap[item.cycleType]}}</text>
								</view>
							</u-col>
							<u-col span="4">
								<u-gap height="20" bg-color=""></u-gap>
								<view class="kjsc1112 demo-layout">
									<text class="textclassc5">{{$t('bico.W757')}}</text>
								</view>
								<u-gap height="20" bg-color=""></u-gap>
								<view class="wdkj1222 demo-layout">
									
									<text class="textclassc5 wdkj30 dashu2">{{item.fuelEnergyNumber}}</text>
									<text class="textclassc5 wdkj30 btti suanli">{{item.fuelEnergyCoin}}/l</text>
								</view>
							</u-col>
							<u-col span="4">
								<u-gap height="20" bg-color=""></u-gap>
								<view class="cpou demo-layout">
									<text class="textclassc5">{{$t('bico.W758')}}</text>
								</view>
								<u-gap height="20" bg-color=""></u-gap>
								<view class="wdkj12 cpou demo-layout">
									
									<text class="textclassc5 wdkj30 dashu3">{{item.energyLossNumber}}</text>
									<text class="textclassc5 wdkj30 btti suanli">{{item.energyLossCoin}}/s</text>
								</view>
							</u-col>
						</u-row>
					</view>
				
					
					<u-line color="#868ca940"></u-line>
					<view class="">
						<!-- 购买燃料按钮开始 -->
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout3"><!-- 缕空 -->
								</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout">
									<view class="anniu">
										<u-button @click="pick(item,'chan')" type="primary">{{item.miningOrderDetail==''?"领取收益":'已领取'}}</u-button>
									</view>
								</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout3"><!-- 缕空 -->
								</view>
							</u-col>
						</u-row>
						<!-- 购买燃料按钮结束 -->
					</view>
					
					<view class="">
						<!-- 启动按钮开始 -->
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout3"><!-- 缕空 -->
								</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout">
									<view class="anniu">
										<u-button type="default" @click="pick(item,'jing')">{{$t('bico.W759')}}</u-button>
									</view>
								</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="12">
								<view class="demo-layout3"><!-- 缕空 -->
								</view>
							</u-col>
						</u-row>
						<!-- 购买按钮结束 -->
					</view>
					<u-gap height="20" bg-color=""></u-gap>
					
				</view>
				</view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import {
		wallet,commonMiningListApi,addMiningOrderApi,miningOrderApi,startUpMiningOrderApi,pickMiningOrderApi,miningOrderDetailApi
	} from '../../common/apiString.js'
	import {
		myMixins
	} from '@/common/myMixins.js' //加入全局下拉刷新
	export default {
		mixins: [myMixins],
		data() {
			return {
				TSLPrice:4561533.1312,
				totalPrice:3000.0000,
				list: [{
					name: this.$t('bico.W760'),
					
				},
				{
					name: this.$t('bico.W761'),
					
				},
				{
					name: this.$t('bico.W762'),
					
				}],
				current: 0,
				show:false,
				cycleTypeMap:{
				  1001:this.$t('bico.W763'),
				  1002:this.$t('bico.W764'),
				  1003:this.$t('bico.W765'),
				},
				stepMap : {
				  "0":this.$t('bico.W766'),
				  "1":this.$t('bico.W767'),
				  "2":this.$t('bico.W768'),
				  "3":this.$t('bico.W767'),
				},
				activeName: 'first',
				miningPage:{
				  current: 1,
				  pages: 1,
				  records: [],
				  searchCount: true,
				  size: 10,
				  total: 1,
				},
				miningOrderPage:{
				  current: 1,
				  pages: 1,
				  records: [],
				  searchCount: true,
				  size: 10,
				  total: 1,
				},
				miningOrderDetailPage:{
				  current: 1,
				  pages: 1,
				  records: [],
				  searchCount: true,
				  size: 10,
				  total: 1,
				},
				detail:{},
			}
		},
		computed: {
			...mapState({
				theme: state => state.theme
			}),
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('bico.W713'),
			})
			this.$utils.setTheme(this.theme);
			this.getMiningList(this.miningPage.current)
			this.getWallet()
		},
		methods: {
			change(index) {
				this.current = index;
				if(index==0){
					this.getMiningList(this.miningPage.current)
				}
				if(index==1){
					this.getMiningOrder(this.miningOrderPage.current)
				}
				if(index==2){
					this.getMiningDetailOrder(this.miningOrderDetailPage.current)
				}
			},
			getWallet(){
			
			
				let that = this;
				
				let dto = {
					valuation:'USDT',
					hide:'N',
					type:"MINING"
				};
			
				this.$utils.initDataToken({url:wallet,data:dto,type:'get'},(res,msg)=>{
						
						var obj = res;
						console.log(obj)
						// that.totalPrice = Number(obj.valuationTotalPrice).toFixed(4);
						if(res.list.length>0){
							for(var i=0;i<res.list.length;i++){
								var item = res.list[i]
								if(item.type==="TRX"){
									that.TSLPrice = Number(item.usedPrice).toFixed(4)
									
								}
								if(item.type==="USDT"){
									that.totalPrice = Number(item.usedPrice).toFixed(4)
									
								}
							}
						}

					});
			},
			getMiningList(page){
				var that=this
				var data ={};
				data.size=this.miningPage.size;
				data.page=this.miningPage.current;
				this.$utils.initData({url:commonMiningListApi,data:data,type:'get'},(res,msg)=>{
					// this.$utils.showLayer(msg);
					that.miningPage=res
					console.log(that.miningPage)
					//setTimeout(()=>{
						//this.$utils.showLayer(msg);
					//},100)
				})
			},
			getMiningOrder(page){
				var that=this
				var data ={};
				data.size=this.miningOrderPage.size;
				data.page=this.miningOrderPage.current;
				this.$utils.initDataToken({url:miningOrderApi,data,type:'post'},(res,msg)=>{
					that.miningOrderPage=res
					console.log(res)
				})
			},
			getMiningDetailOrder(page){
				var that=this
				var data ={};
				data.size=this.miningOrderDetailPage.size;
				data.page=this.miningOrderDetailPage.current;
				this.$utils.initDataToken({url:miningOrderDetailApi,data,type:'post'},(res,msg)=>{
					that.miningOrderDetailPage=res
					console.log(res)
				})
			},
			addMining(id){
			  var that=this
			  var data ={};
			  data.id=id;
			  this.$utils.initDataToken({url:addMiningOrderApi,data,type:'post'},(res,msg)=>{
			  	this.$utils.showLayer(this.$t("bico.W769"));
			  })
			},
			
			pick(item,type){
			  var that=this
			  var flag = true
			  if(item.miningOrderDetail.length>0){
			    for (let i = 0; i < item.miningOrderDetail.length; i++) {
			      var aaaa = item.miningOrderDetail[i]
			      if(item.staticCoin == aaaa.miningUnit && type =="jing"){
			        flag = false
			      }
			      if(item.miningCoin == aaaa.miningUnit && type =="chan"){
			        flag = false
			      }
			    }
			  }
			  if(flag){
			    var data ={};
			    data.id=item.miningOrderId;
				data.type=type
				that.$utils.initDataToken({url:pickMiningOrderApi,data,type:'post'},(res,msg)=>{
					that.$utils.showLayer(this.$t("bico.W770"));
				})
			  }else{
			    that.$utils.showLayer(this.$t("bico.W771"));
			  }
			},
			startUp(item){
			  if(item.miningStatus == '0'){
			    var that=this
			    var data ={};
			    data.id=item.miningOrderId;
				that.$utils.initDataToken({url:startUpMiningOrderApi,data,type:'post'},(res,msg)=>{
					that.$utils.showLayer(this.$t("bico.W772"));
					that.getMiningList(that.miningPage.current)
					that.getWallet()
				})		
			  }
			},
			linkKline(symbol) {
				uni.setStorageSync("klineSymbol",symbol+"/USDT")
				uni.switchTab({
					url: '/pages/trade/trade'
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}


	.container {
		
		width: 100%;
		height: 100%;
		
		.wrap {
			padding: 0px;
			padding-top: 0vw;
			width: 100%;
			height: 60vw;
			
			background-size: 100%;
			background-position: center center;
			border-radius: 0vw 0vw 0vw 0vw;
		}
		
		.bmret{
			    padding: 0vw 0;
			    text-align: center;
			    justify-content: space-around;
			    border-radius: 2vw 2vw 0vw 0vw;
			    background-color: #2e2f5a;
				background-color: #FFF;
				position: relative;
				top: -4vw;
			
		}
		.bgtxt{
			font-size: 16px;
			/*font-weight: bold;*/
			font-family: Times New Roman,Times,serif;
			padding: 0vw 5vw;
			color: #fff;
			position: absolute;
			top: 10vw;
			left: 2vw;
		}
		.bgtxt2{
			font-size: 18px;
			font-weight: bold;
			font-family: Times New Roman,Times,serif;
			padding: 0vw 5vw;
			color: #fff;
			position: absolute;
			top: 20vw;
			left: 2vw;
		}
		.mplrto{
			
			/*width: 100%;*/
			height: 100%;
			background: #3e38ec;
			background: url(../../static/mstarch/xl.gif) #2354e6 no-repeat center center;
			
			padding: 0;
			background-size: cover;
			background-position: center;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: column;
		}
		.bgtxttt{
			font-size: 18px;
			font-weight: bold;
			font-family: Times New Roman,Times,serif;
			padding: 0vw 5vw;
			color: #fff;
			position: absolute;
			top: 20vw;
			left: 2vw;
		}
		.bgtxt22{
			font-size: 16px;
			/*font-weight: bold;*/
			font-family: Times New Roman,Times,serif;
			padding: 0vw 5vw;
			color: #fff;
			position: absolute;
			top: 30vw;
			left: 2vw;
		}
		
		
		
		
	}

</style>
<style scoped lang="scss">
	.wrap {
		
	}

	.u-row {
		margin: 0px 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}
	
	.demo-layout2 {
		height: 20px;
		border-radius: 8rpx;
	}
    .demo-layout3 {
		height: 10px;
		border-radius: 8rpx;
	}
	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>

<style scoped lang="scss">
	.kjsc {
		background-color: #ffffff;
		padding: 0px 0px;
		margin-top: 30px;
		border-radius: 2vw;
		width: 96%;
		margin: 4vw 2vw;
		border: 0.5px solid #7079ab24;
	}
	.kjsc1 {
		position: relative;
		border: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		/*justify-content: center;*/
		cursor: pointer;
		z-index: 1;
		transition: all 0.15s;
		font-size: 14px;
		padding: 6vw 2vw;
	}
	.kjsc2 {
		position: relative;
		border: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 1;
		transition: all 0.15s;
		font-size: 14px;
	}
	.kjsc3 {
		position: relative;
		border: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		cursor: pointer;
		z-index: 1;
		transition: all 0.15s;
		font-size: 14px;
	}
	.image3 {
		margin-right: 2vw;
		width: 6vw;
		height: 6vw;
		border-radius: 0%;
		margin-top: -2px;
	}
	.image4 {
		margin-right: 2vw;
		width: 6vw;
		height: 6vw;
		border-radius: 0%;
	}
	.image5 {
		width: 40vw;
		height: 36vw;
		border-radius: 1vw;
	}
	.anniu{
		width: 92%;
		margin: -2vw 4vw;
		margin-top: 0vw;
	}
	
	.textclass2{
		font-size: 6vw;
		
		color: #D33055;
	}
	.textclass3{
		    font-size: 6vw;
		    /* font-weight: bold; */
		    color: #22253c;
		    margin-right: 2vw;
	}
	.textclass4{
		font-size: 4vw;
		font-weight: bold;
		color: #0266f1;
		margin: 0px 4px;
		
	}
	.textclass{
		    font-size: 4.5vw;
		    font-weight: bold;
		    margin-right: 2vw;
	}
	.kjlogo{
		height: 22vw;
	}
	.dpm {
		position: relative;
		border: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		cursor: pointer;
		z-index: 1;
		transition: all 0.15s;
		padding: 0vw 2vw;
		margin-top: -22px;
		font-size: 4vw;
		color: #919598;
	}

	.kjbg{
		    background-color: #ffffff;
    border-radius: 1vw;
    /* width: 150px; */
    /* height: 150px; */
    margin: 0vw 2vw;
		    border: 0.5px solid #7079ab24;
		
	}
	.kjsc1bg {

		    display: flex;
		    padding: 2vw 2vw 2vw 2vw;
	}

	.dpmm1 {
		display: flex;
		    padding: 2.5vw 2vw;
		    margin-top: -18px;
	}
	.kjsc353 {
		    position: relative;
		    border: 0;
		    display: flex;
		    flex-direction: row;
		    align-items: center;
		    justify-content: flex-end;
		    cursor: pointer;
		    z-index: 1;
		    transition: all 0.15s;
		    font-size: 14px;
		    padding: 2vw 2vw;
		    color: #ea6b47;
		    background: #ffebcfc9;
		    border-radius: 8px;
		    height: 20px;
			
	}
	.kjsc3539 {
		    position: relative;
		    border: 0;
		    display: flex;
		    flex-direction: row;
		    align-items: center;
		    justify-content: flex-end;
		    cursor: pointer;
		    z-index: 1;
		    transition: all 0.15s;
		    font-size: 14px;
		    padding: 2vw 2vw;
		        color: #0266f1;
		        background: #0266f13b;
		    border-radius: 8px;
		    height: 20px;
			
	}
	.textclassc5{
		font-size: 4vw;
		font-weight: 400;
	}
	.textclassc6{
		font-size: 4vw;
		font-weight: 400;
		color: #ea6b47;
		background: #ffebcfc9;
		border-radius: 8px;
	}
	.txtert{
		 font-size: 4vw;
		 font-weight: bold;
	}
	.wdkj{
		background-color: #ffffff;
		padding: 0px 0px;
		//margin-top: 30px;
		border-radius: 2vw;
		width: 96%;
		margin: 4vw 2vw;
		border: 0.5px solid #7079ab24;
	}
	.cpos{
		margin-right: 2vw;
	}
	.wdkj12 {
		position: relative;
		border: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		cursor: pointer;
		z-index: 1;
		transition: all 0.15s;
		padding: 0vw 2vw;
		margin-top: -18px;
		font-size: 4vw;
	}
	.wdkj30{
		font-size: 4vw;
		
		
	}
	.hyjg{
		font-size: 4vw;
		
		color: #00aa7f;
		margin-right: 1vw;
	}
	.dashu1{
		font-size: 6vw;
		
		
		margin-right: 1vw;
	}
	.dashu2{
		font-size: 6vw;

		
		margin-right: 1vw;
	}
	.dashu3{
		font-size: 6vw;

		
		margin-right: 1vw;
	}
	.btti{
		font-family: Times New Roman,Times,serif;
	}
	.cpou{
		position: relative;
		    border: 0;
		    display: flex;
		    flex-direction: row;
		    align-items: center;
		    justify-content: flex-end;
		    cursor: pointer;
		    z-index: 1;
		    transition: all 0.15s;
		    font-size: 14px;
			padding: 0vw 2vw;
	}
	.kjsc111 {
		position: relative;
		border: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		/*justify-content: center;*/
		cursor: pointer;
		z-index: 1;
		transition: all 0.15s;
		font-size: 14px;
		padding: 0vw 2vw;
	}
	.kjsc1112 {
		position: relative;
		border: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		/*justify-content: center;*/
		cursor: pointer;
		z-index: 1;
		transition: all 0.15s;
		font-size: 14px;
		padding: 0vw 6vw;
	}
	.wdkj1222 {
		position: relative;
		border: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		cursor: pointer;
		z-index: 1;
		transition: all 0.15s;
		padding: 0vw 6vw;
		margin-top: -18px;
		font-size: 4vw;
	}
	.chanchu {
		position: relative;
		border: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		cursor: pointer;
		z-index: 1;
		transition: all 0.15s;
		padding: 0vw 0vw;
		margin-top: -18px;
		font-size: 4vw;
	}
	.suanli{
		
	}
	.suanli2{
		font-size: 12PX;
	}
	.suanli3{
		font-size: 14PX;
		margin-top: 18px;
	}
	.u-size-default {
	    font-size: 14px;
	    height: 40px;
	    line-height: 40px;
	}
	.textclass9{
		    font-size: 4vw;
		    color: #FF9800;
			font-weight: bold;
	}
	.dashu12{
		font-size: 4vw;
		color: #19be6b;
	}
</style>